<template>
  <div class="recommend">
    <ul>
      <li>
        <i class="el-icon-sunny"></i>
        <span>今日推荐</span>
      </li>
      <li><img src="./img/today01.55a0e6d2.png" alt=""></li>
      <li><img src="./img/today02.04ef8d82.png" alt=""></li>
      <li><img src="./img/today03.0ba39cce.png" alt=""></li>
      <li><img src="./img/today04.43a1e241.png" alt=""></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'todayRecommend'
}
</script>

<style scoped lang="less">
.recommend {
  ul {
    display: flex;
    li {
      flex: 1;
      width: 20%;
      height: 165px;
      overflow: hidden;
      cursor: pointer;
      img{
        transition: 0.2s all;
      }
      &:hover img{
        transform: scale(1.1);
      }
      &:nth-child(1) {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #5c5251;
        color: #fff;
        i {
          font-size: 85px;
        }
        span {
          margin-top: 10px;
          font-size: 20px;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
